---
title: Botons
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Una llista de botons i grups de botons utilitzats a tota l'aplicació.

## Botó

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props        | Tipus                 | Descripció                                                                                                                                           |
| ------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse  | cadena                | Optional class name for additional styling                                                                                                           |
| Icona        | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó                                                                                            |
| títol        | cadena                | El contingut de text del botó                                                                                                                        |
| ampleComplet | boolean               | Defineix si el botó ha d'abastar tota l'amplada del seu contenidor                                                                                   |
| variant      | cadena                | L'estil visual del botó. Les opcions inclouen `primari`, `secundari`, i `terciari`                                                   |
| tamany       | cadena                | La mida del botó. Té dues opcions: `petit` i `mitjà`                                                                 |
| posició      | cadena                | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `dreta`, i `mig` |
| accent       | cadena                | El color d'accent del botó. Les opcions inclouen: `per defecte`, `blau`, i `perill`                                  |
| properament  | boolean               | Indica si el botó està marcat com a "aviat" (com per a funcions pròximes)                                                         |
| desactivat   | boolean               | Especifica si el botó està desactivat o no                                                                                                           |
| focus        | boolean               | Determina si el botó té el focus                                                                                                                     |
| onClick      | funció                | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó                                                                  |

</Tab>

</Tabs>

## Grup de Botons

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Propietats           | Tipus                 | Descripció                                                                                                                                         |
| -------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse          | cadena                | Nom opcional per a un estil addicional                                                                                                             |
| Icona                | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó                                                                                          |
| títol                | cadena                | El contingut de text del botó                                                                                                                      |
| tamany               | cadena                | La mida del botó. Té dues opcions: `petit` i `mitjà`                                                               |
| posició              | cadena                | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `mig`, `dreta` |
| aplicarOmbra         | boolean               | Determina si ha d'aplicar una ombra a un botó                                                                                                      |
| aplicarDesenfocament | boolean               | Determina si ha d'aplicar un efecte de desenfocament al botó                                                                                       |
| desactivat           | boolean               | Determina si el botó està desactivat                                                                                                               |
| focus                | boolean               | Indica si el botó té focus                                                                                                                         |

</Tab>
</Tabs>

## Grup de Botons Flotants

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Props    | Tipus     | Descripció                                                                           | Per defecte |
| -------- | --------- | ------------------------------------------------------------------------------------ | ----------- |
| tamany   | cadena    | La mida del botó. Té dues opcions: `petit` i `mitjà` | petit       |
| children | ReactNode | Una llista d'elements React que representen els botons individuals dins del grup     |             |

</Tab>

</Tabs>

## Botó d'Icona Flotant

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propietats           | Tipus                 | Descripció                                                                                                                                           |
| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| className            | cadena                | Nom opcional per a un estil addicional                                                                                                               |
| Icona                | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó                                                                                            |
| tamany               | cadena                | La mida del botó. Té dues opcions: `petit` i `mitjà`                                                                 |
| posició              | cadena                | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `dreta`, i `mig` |
| aplicarOmbra         | boolean               | Determina si ha d'aplicar una ombra a un botó                                                                                                        |
| aplicarDesenfocament | boolean               | Determina si ha d'aplicar un efecte de desenfocament al botó                                                                                         |
| desactivat           | boolean               | Determina si el botó està desactivat                                                                                                                 |
| focus                | boolean               | Indica si el botó té focus                                                                                                                           |
| onClick              | funció                | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó                                                                  |
| estàActiu            | boolean               | Determina si el botó està en estat actiu                                                                                                             |

</Tab>

</Tabs>

## Grup de Botons d'Icona Flotant

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Props          | Tipus   | Descripció                                                                                                                                                                                                                                                                            |
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse    | cadena  | Nom opcional per a un estil addicional                                                                                                                                                                                                                                                |
| tamany         | cadena  | La mida del botó. Té dues opcions: `petit` i `mitjà`                                                                                                                                                                                                  |
| botons d'icona | conjunt | An array of objects, each representing an icon button in the group. Cada objecte ha d'incloure el component d'icona que es vol mostrar en el botó, la funció que es vol cridar quan l'usuari faci clic en el botó i si el botó ha d'estar actiu o no. |

</Tab>

</Tabs>

## Botó Lleuger

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Props       | Tipus             | Descripció                                                                                                 |
| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
| nomDeClasse | cadena            | Nom opcional per a un estil addicional                                                                     |
| icona       | `React.ReactNode` | La icona que es vol mostrar en el botó                                                                     |
| títol       | cadena            | El contingut de text del botó                                                                              |
| accent      | cadena            | El color d'accent del botó. Les opcions inclouen: `secundari` i `terciari` |
| actiu       | boolean           | Determina si el botó està en estat actiu                                                                   |
| desactivat  | boolean           | Determina si el botó està desactivat                                                                       |
| focus       | boolean           | Indica si el botó té focus                                                                                 |
| onClick     | funció            | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó                        |

</Tab>

</Tabs>

## Botó d'Icona Lleuger

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propietats         | Tipus                 | Descripció                                                                                                 |
| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------- |
| nomDeClasse        | cadena                | Nom opcional per a un estil addicional                                                                     |
| identificadorProva | cadena                | Identificador de prova per al botó                                                                         |
| Icona              | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó                                                  |
| títol              | cadena                | El contingut de text del botó                                                                              |
| tamany             | cadena                | La mida del botó. Té dues opcions: `petit` i `mitjà`                       |
| accent             | cadena                | El color d'accent del botó. Les opcions inclouen: `secundari` i `terciari` |
| actiu              | boolean               | Determina si el botó està en estat actiu                                                                   |
| desactivat         | boolean               | Determina si el botó està desactivat                                                                       |
| focus              | boolean               | Indica si el botó té focus                                                                                 |
| onClick            | funció                | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó                        |

</Tab>

</Tabs>

## Botó Principal

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                | Tipus                            | Descripció                                                                                   |
| -------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
| títol                | cadena                           | El contingut de text del botó                                                                |
| ampleComplet         | boolean                          | Defineix si el botó ha d'abastar tota l'amplada del seu contenidor                           |
| variant              | cadena                           | L'estil visual del botó. Options include `primary` and `secondary`           |
| properament          | boolean                          | Indica si el botó està marcat com a "aviat" (com per a funcions pròximes) |
| Icona                | `React.ComponentType`            | Un component d'icona opcional que es mostra dins del botó                                    |
| React `button` props | `React.ComponentProps<'button'>` | Totes les propietats estàndard HTML del botó són compatibles                                 |

</Tab>

</Tabs>

## Botó d'icona arrodonida

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                | Tipus                                           | Descripció |
| -------------------- | ----------------------------------------------- | ---------- |
| Icona                | `React.ComponentType`                           |            |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |            |

</Tab>

</Tabs>
